<div style="width: 700px">
  <div class="tree-title">
    <h4>Node</h4>
    <h4>Status</h4>
  </div>
  <div>
    <d-operable-tree
      #operableTree
      [tree]="data2"
      [treeNodeIdKey]="'id'"
      [treeNodeChildrenKey]="'children'"
      (nodeSelected)="onOperableNodeSelected($event)"
      [iconParentOpen]="iconParentOpen"
      [iconParentClose]="iconParentClose"
      [iconLeaf]="iconLeaf"
      [iconTemplatePosition]="'after-checkbox'"
      [disableMouseEvent]="disableMouseEvent"
    >
      <ng-template #iconTemplate let-node="node">
        <span [ngClass]="{ 'my-icon': node?.data?.type }" class="{{ node?.data?.type }}"></span>
      </ng-template>
      <ng-template #nodeTemplate let-node="node" let-completeNode="completeNode">
        <span *ngIf="!node?.editable" style="margin: 0 10px; cursor: pointer" (click)="activeNode(completeNode)">{{ node?.title }}</span>
        <span class="devui-tree-node__edit" *ngIf="node?.editable">
          <input [(ngModel)]="node.title" (blur)="onBlurEdit(node)" />
        </span>
      </ng-template>
      <ng-template #statusTemplate let-node="node">
        <span class="op-status"></span>
        <span class="status-position">{{ node.data.originItem?.status }}</span>
      </ng-template>
      <ng-template #operatorTemplate let-optree let-node="node" let-addNode="addNode" let-editNode="editNode" let-deleteNode="deleteNode">
        <span class="op-icons icon icon-add" (click)="addNode($event, node)"></span>
        <span class="op-icons icon icon-edit" (click)="editNode($event, node)"></span>
        <span class="op-icons icon icon-close" (click)="deleteNode($event, node)"></span>
        <span
          class="op-icons icon icon-more-operate"
          dDropDown
          dDropDownToggle
          appendToBody
          [trigger]="'hover'"
          (toggleEvent)="onToggle($event, node)"
        >
          <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
            <li class="disabled" role="menuitem">
              <a class="devui-dropdown-item disabled">option 1</a>
            </li>
            <li role="menuitem"><a class="devui-dropdown-item">option 2</a></li>
            <li role="menuitem"><a class="devui-dropdown-item">option 3</a></li>
          </ul>
        </span>
      </ng-template>
    </d-operable-tree>
  </div>
</div>
